<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
	<title>角色管理</title>
	
	<!-- select2组合框 -->
	<link rel="stylesheet" type="text/css" href="${ctx}/static/metronic/assets/plugins/select2/select2_metro.css"/>
	<script type="text/javascript" src="${ctx}/static/metronic/assets/plugins/select2/select2.min.js"></script>
	
    <script>
	$(document).ready(function() {
			
		$("#inputForm").validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: ".ignore",

			rules: {
				//复选框的至少选一个校验
				permissions:"required"
			},
			messages: {
				//自定义错误信息
				permissions: "请选择权限"
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				if ( element.is(":checkbox") )
					error.appendTo($('#permissionGroup'));
				else
					error.insertAfter(element);
			},
				
            highlight: function (element) { // hightlight error inputs
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group   
                var icon = $(element).parent('.input-icon').children('i');
            	icon.addClass("fa-warning").removeClass("fa-check");
            },

            unhighlight: function (element) { // revert the change done by hightlight
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
                var icon = $(element).parent('.input-icon').children('i');
                icon.removeClass("fa-warning").addClass("fa-check");
            },

            success: function (label, element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
                var icon = $(element).parent('.input-icon').children('i');
                icon.removeClass("fa-warning").addClass("fa-check");
            }
        });
		
	});
	</script>
</head>

<body>
<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper">
		<div class="page-content">
			<div id="messageBox" class="alert alert-info" style="display:none">输入有误，请先更正。</div>
			<div class="row">
				<div class="col-md-12">
					<div class="portlet box green">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-reorder"></i>${action=='create' ? '创建' : action=='update' ? '编辑' : '查看'}角色
							</div>
						</div>
						<div class="portlet-body form">
							<!-- BEGIN FORM-->
							<form id="inputForm" action="${ctx}/role/${action}" enctype="multipart/form-data" method="post" class="form-horizontal">
							<input type="hidden" name="id" value="${role.id}"/>
								<div class="form-body">
									<div class="form-group">
										<label class="col-md-3 control-label">角色名称</label>
										<div class="col-md-4">
											<div class="input-icon right">
												<i class="fa"></i>
												<input type="text" id="name" name="name" class="form-control required" maxlength="255" placeholder="输入角色名称" value="${role.name}">
											</div>
										</div>
									</div>
								</div>
								<div class="form-body">
									<div class="form-group">
										<label class="col-md-3 control-label">权限</label>
										<div class="col-md-9">
											<div id="permissionGroup" class="input-icon right">
												<i class="fa"></i>
												
												<c:forEach items="${permissions}" var="pg">
													<c:forEach items="${pg}" var="p">
													<label class="checkbox-inline">
														<c:set var="permissionCode" value="[${p.code}]"/>
														<input type="checkbox" id="permission_${p.code}" name="permissions" value="${p.id}" <c:if test='${fn:contains(role.permissionStr,permissionCode)}'>checked="checked"</c:if>/>
														${p.description}
													</label>
													</c:forEach>
													<br/>
												</c:forEach>
											</div>
										</div>
									</div>
								</div>
								<div class="form-actions fluid">
									<div class="col-md-offset-3 col-md-9">
										<button type="submit" class="btn blue">提交</button>
										<button type="button" class="btn default" onclick="history.back()">取消</button>
									</div>
								</div>
							</form>
							<!-- END FORM-->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
